.box1{
    color: red;
    // & 符就表示外部的父元素
    &:hover{
        color: green;
    }
    .box2{
        color: green;
    

    }
    >.box3{
        color: yellowgreen;
        &:hover{
            color: beige;
        }
    }
    div &:hover{
        color: purple;
    }
}

.inline{
    color: white;
}
// :extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p1{
    &:extend(.box1 > .box3);
    background-color: red;
}
.p2:extend(.p1){
    width: 200px;
    
}
// 直接对指定样式进行引用，这里就相当于将p1的样式在这里进行了复制
// mixin 混合
.p3{
    // 相当于复制，性能会差一点
    .p1();
    height: 200px;
}
// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就
//创建了一个mixins
.my-inline-block{
    height: 100px;
    width: 100px;
}
.p4{
    .my-inline-block();
}
.p5{
    .my-inline-block()
}
// 用拓展更省空间更省代码，即下面这种方式
.p6{
    &:extend(.my-inline-block);
}
// 混合函数 在混合函数中可以直接设置变量
.test(@w:400px,@h:400px,@c:yellow){
    width: @w;
    height: @h;
    border: 1px solid @c;
    background-color: red
}
div{
    // 调用混合函数，按顺序传递参数，或者按名传
    .test(@w:200px,@c:red      
    
    
    
    JJ
    
    u,@h:300px);
}
// 如果默认了就不必再传值，有的话会替代掉默认值
.p7{
    .test();
}
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    background-color: yellowgreen;
    &:hover{
        background-color: darken(yellowgreen,10%);
    }
}